<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI 排序（Sortable） - 处理空列表</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <!-- <link rel="stylesheet" href="jqueryui/style.css"> -->
    <style>
        #sortable1,
        #sortable2,
        #sortable3 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            float: left;
            margin-right: 10px;
            background: #eee;
            padding: 5px;
            width: 143px;
        }

        #sortable1 li,
        #sortable2 li,
        #sortable3 li {
            margin: 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>
    <script>
        $(function () {
            $("ul.droptrue").sortable({
                connectWith: "ul"
            });

            $("ul.dropfalse").sortable({
                connectWith: "ul",
                dropOnEmpty: false
            });

            $("#sortable1, #sortable2, #sortable3").disableSelection();
        });
    </script>
</head>

<body>

    <ul id="sortable1" class="droptrue">
        <li class="ui-state-default">可被放置到..</li>
        <li class="ui-state-default">..一个空列表中</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="dropfalse">
        <li class="ui-state-highlight">不可被放置到..</li>
        <li class="ui-state-highlight">..一个空列表中</li>
        <li class="ui-state-highlight">Item 3</li>
        <li class="ui-state-highlight">Item 4</li>
        <li class="ui-state-highlight">Item 5</li>
    </ul>

    <ul id="sortable3" class="droptrue">
    </ul>

    <br style="clear:both">


</body>

</html>